import {createApp} from 'vue';
import App from '@/App.vue';
import router from '@/router';
import naive from 'naive-ui';

import {createPinia} from 'pinia';
import {createDiscreteApi} from 'naive-ui';

// 导入所有图标库
import * as Ionicons from '@vicons/ionicons5';
import * as CarbonIcons from '@vicons/carbon';
import * as TablerIcons from '@vicons/tabler';
import * as MaterialIcons from '@vicons/material';

const {message, notification, dialog, loadingBar} = createDiscreteApi([
  'message',
  'notification',
  'dialog',
  'loadingBar',
]);

export function setupGlobalMessage() {
  window.$message = message;
  window.$notification = notification;
  window.$dialog = dialog;
  window.$loadingBar = loadingBar;
}

export function createVueApp() {
  const app = createApp(App);

  function useNaive() {
    app.use(naive);
    return appInstance;
  }

  function usePinia() {
    const pinia = createPinia()
    app.use(pinia);
    return appInstance;
  }

  function useRouter() {
    app.use(router);
    return appInstance;
  }

  function setupGlobal() {
    setupGlobalMessage();

    // 挂载所有图标
    app.config.globalProperties.$icons = {
      ...Ionicons,
      ...TablerIcons,
      ...MaterialIcons,
      ...CarbonIcons
    };


    return appInstance;
  }

  function mountApp() {
    app.mount('#app');
    return appInstance;
  }

  // 组织方法，避免 `this` 作用域问题
  const appInstance = {
    useNaive,
    useRouter,
    usePinia,
    setupGlobal,
    mountApp,
    start() {
      setupGlobal();
      useNaive();
      useRouter();
      usePinia();
      mountApp();
    },
  };

  return appInstance;
}
